<template>
	<view class="container">
		<!-- 顶部状态栏和导航栏 -->
		<view class="header">
			<view class="status-bar">
				
				
			</view>
			<view class="nav-bar">
				<view class="nav-left" @click="goToMessage">
					<image src="/static/index/消息中心.png" class="nav-icon"></image>
				</view>
				<text class="nav-title">首页</text>
				<view class="nav-right">
					<image src="/static/index/示警.png" class="nav-icon"></image>
				</view>
			</view>
		</view>

		<!-- 位置/搜索栏 -->
		<view class="location-bar">
			<view class="location-input" @click="onLocationClick">
				<image src="/static/index/定位2.png" class="location-icon"></image>
				<text class="location-text">{{ userLocation.address }}</text>
				<view class="refresh-section" @click.stop="onRefreshLocation">
					<image src="/static/index/刷新 (1).png" class="refresh-icon"></image>
					<text class="refresh-text">刷新</text>
				</view>
			</view>
		</view>

		<!-- 服务分类 -->
		<view class="service-section">
			<view class="service-grid">
				<view 
					class="service-item" 
					v-for="service in serviceCategories" 
					:key="service.id"
					@click="onServiceClick(service)"
				>
					<view class="service-icon" :class="service.iconClass">
						<image :src="service.icon" class="service-img"></image>

					</view>
					<text class="service-label">{{ service.name }}</text>
				</view>
			</view>
		</view>

		<!-- 附近加油站 -->
		<view class="gas-station-section">
			<view class="section-header">
				<view class="section-title">
					<text class="title-text">附近加油站</text>
					<text class="subtitle-text">根据您的位置推荐最近的加油站</text>
				</view>
				<text class="more-link" @click="onViewMoreNearbyStore">更多 ></text>
			</view>
			<view class="map-container">
				<!-- 微信小程序端：使用原生map组件 -->
				<!-- #ifdef MP-WEIXIN -->
				<map 
					class="map-component" 
					:latitude="mapData.latitude" 
					:longitude="mapData.longitude"
					:markers="mapData.markers"
					:scale="mapData.scale"
					:show-location="true"
					:enable-zoom="true"
					:enable-scroll="true"
					:enable-rotate="true"
					@markertap="onMarkerTap"
					@load="onMapLoad"
				></map>
				<!-- #endif -->
				
				<!-- H5端：使用高德地图 -->
				<!-- #ifdef H5 -->
				<div id="amap-container" class="map-component"></div>
				<!-- #endif -->
				
				<!-- App端：使用原生map组件 -->
				<!-- #ifdef APP-PLUS -->
				<map 
					class="map-component" 
					:latitude="mapData.latitude" 
					:longitude="mapData.longitude"
					:markers="mapData.markers"
					:scale="mapData.scale"
					:show-location="true"
					:enable-zoom="true"
					:enable-scroll="true"
					:enable-rotate="true"
					@markertap="onMarkerTap"
					@load="onMapLoad"
				></map>
				<!-- #endif -->
			</view>
		</view>

		<!-- 优惠团购 -->
		<view class="group-buy-section">
			<view class="section-header">
				<view class="section-title">
					<text class="title-text">优惠团购</text>
					<text class="subtitle-text">钜惠袭来 为您的爱车续航</text>
				</view>
				<text class="more-link" @click="onViewMoreGroupBuy">更多 ></text>
			</view>
			<scroll-view class="group-buy-scroll" scroll-x="true">
				<view class="group-buy-list">
					<view 
						class="group-buy-item" 
						v-for="activity in groupBuyActivities" 
						:key="activity.id"
						@click="onGroupBuyClick(activity)"
					>
						<image :src="activity.image" class="group-buy-img" mode="aspectFill"></image>
						<text class="group-buy-text">{{ activity.title }}</text>
						<view class="group-buy-price">
							<text class="original-price">¥{{ activity.originalPrice }}</text>
							<text class="group-price">¥{{ activity.groupPrice }}</text>
						</view>
						<view class="group-buy-info">
							<text class="participants">{{ activity.participants }}人参与</text>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>

		<!-- 自定义TabBar -->
		<CustomTabbar />
	</view>
</template>

<script>
	import CustomTabbar from '@/components/custom-tabbar/custom-tabbar.vue'
	
	export default {
		components: {
			CustomTabbar
		},
		data() {
			return {
				// 用户位置信息
				userLocation: {
					address: '焦作市山阳区人民路32号',
					latitude: 35.2159,
					longitude: 113.2418
				},
				// 服务分类数据
				serviceCategories: [
					{
						id: 1,
						name: '车辆维修',
						icon: '/static/index/车辆维修1-01.png',
						iconClass: 'blue',
						type: 'repair',
						path: '/pages/vehicle_repair/repair/repair',
						description: '专业车辆维修服务'
					},
					{
						id: 2,
						name: '汽车保养',
						icon: '/static/index/保养.png',
						iconClass: 'orange',
						type: 'maintenance',
						path: '/pages/maintenance/index/index',
						description: '定期保养维护服务'
					},
					{
						id: 3,
						name: '专业洗车',
						icon: '/static/index/洗车.png',
						iconClass: 'green',
						type: 'carwash',
						path: '/pages/car_wash/professional/professional',
						description: '专业洗车美容服务'
					},
					{
						id: 4,
						name: '就近加油',
						icon: '/static/index/加油枪 (1).png',
						iconClass: 'light-blue',
						type: 'gas',
						path: '/pages/addOil/nearOil/nearOil',
						description: '附近加油站查询'
					}
				],
				// 团购活动数据
				groupBuyActivities: [
					{
						id: 1,
						title: '汽车惠民活动走进社区',
						image: '/static/index/Snipaste_2025-09-03_22-46-30.jpg',
						originalPrice: 299,
						groupPrice: 199,
						participants: 128,
						status: 'active',
						path: '/pages/activity/detail/detail?id=1',
						description: '专业汽车保养服务，原价299元，团购价199元'
					},
					{
						id: 2,
						title: '汽车惠民活动走进企业',
						image: '/static/index/Snipaste_2025-09-03_22-46-43.jpg',
						originalPrice: 399,
						groupPrice: 299,
						participants: 89,
						status: 'active',
						path: '/pages/activity/detail/detail?id=2',
						description: '企业团购优惠，专业维修服务'
					},
					{
						id: 3,
						title: '汽车惠民活动走进学校',
						image: '/static/index/Snipaste_2025-09-03_22-46-30.jpg',
						originalPrice: 199,
						groupPrice: 149,
						participants: 256,
						status: 'active',
						path: '/pages/activity/detail/detail?id=3',
						description: '学生专享优惠，洗车保养服务'
					},
					{
						id: 4,
						title: '汽车惠民活动走进商场',
						image: '/static/index/Snipaste_2025-09-03_22-46-43.jpg',
						originalPrice: 499,
						groupPrice: 399,
						participants: 67,
						status: 'active',
						path: '/pages/activity/detail/detail?id=4',
						description: '商场合作活动，全方位汽车服务'
					}
				],
				// 地图数据
				mapData: {
					latitude: 35.2159, // 焦作市纬度
					longitude: 113.2418, // 焦作市经度
					scale: 14, // 地图缩放级别
					markers: [
						{
							id: 1,
							latitude: 35.2159,
							longitude: 113.2418,
							title: '焦作市政府',
							iconPath: '/static/index/定位2.png',
							width: 32,
							height: 32,
							type: 'government'
						},
						{
							id: 2,
							latitude: 35.2200,
							longitude: 113.2450,
							title: '万达广场',
							iconPath: '/static/index/定位2.png',
							width: 32,
							height: 32,
							type: 'shopping'
						},
						{
							id: 3,
							latitude: 35.2100,
							longitude: 113.2380,
							title: '焦作大学',
							iconPath: '/static/index/定位2.png',
							width: 32,
							height: 32,
							type: 'education'
						}
					]
				}
			}
		},
		methods: {
			// 跳转到消息/记录页面（使用已存在的页面）
			goToMessage() {
				uni.navigateTo({
					url: '/pages/other/my-message/my-message',
					success: () => {
						console.log('跳转到记录页面');
					},
					fail: (err) => {
						console.error('跳转失败:', err);
						uni.showToast({
							title: '页面跳转失败',
							icon: 'none'
						});
					}
				});
			},
			// 服务分类点击事件
			onServiceClick(service) {
				console.log('点击服务分类:', service);
				// 这里可以根据服务类型进行不同的处理
				switch(service.type) {
					case 'repair':
						this.navigateToService(service.path, service);
						break;
					case 'maintenance':
						this.navigateToService(service.path, service);
						break;
					case 'carwash':
						this.navigateToService(service.path, service);
						break;
					case 'gas':
						this.navigateToGasStation();
						break;
					default:
						uni.showToast({
							title: `跳转到${service.name}`,
							icon: 'none'
						});
				}
			},
			// 跳转到服务页面
			navigateToService(path, service) {
				// 检查页面是否存在，如果不存在则显示提示
				uni.navigateTo({
					url: path,
					fail: () => {
						uni.showToast({
							title: `${service.name}功能开发中`,
							icon: 'none'
						});
					}
				});
			},
			// 跳转到加油/附近门店页面
			navigateToGasStation() {
				uni.navigateTo({
					url: '/pages/vehicle_repair/nearbyStore/nearbyStore'
				});
			},
			// 团购活动点击事件
			onGroupBuyClick(activity) {
				console.log('点击团购活动:', activity);
				uni.navigateTo({
					url: activity.path,
					fail: () => {
						uni.showModal({
							title: activity.title,
							content: activity.description,
							showCancel: false,
							confirmText: '知道了'
						});
					}
				});
			},
			// 查看更多团购
			onViewMoreGroupBuy() {
				uni.navigateTo({
					url: '/pages/other/group-buydeal/group-buydeal',
					success: () => {
						console.log('跳转到团购列表页面');
					},
					fail: (err) => {
						console.error('跳转失败:', err);
						uni.showToast({
							title: '页面跳转失败',
							icon: 'none'
						});
					}
				});
			},
			// 查看更多附近门店
			onViewMoreNearbyStore() {
				uni.navigateTo({
					url: '/pages/vehicle_repair/nearbyStore/nearbyStore'
				});
			},
			// 点击位置信息跳转到选择地址页面
			onLocationClick() {
				uni.navigateTo({
					url: '/pages/other/choose-address/choose-address',
					success: () => {
						console.log('跳转到选择地址页面');
					},
					fail: (err) => {
						console.error('跳转失败:', err);
						uni.showToast({
							title: '页面跳转失败',
							icon: 'none'
						});
					}
				});
			},
			// 刷新位置
			onRefreshLocation() {
				uni.showLoading({
					title: '正在刷新位置...'
				});
				// 模拟获取位置
				setTimeout(() => {
					uni.hideLoading();
					uni.showToast({
						title: '位置已更新',
						icon: 'success'
					});
				}, 1500);
			},
			// 地图标记点击事件
			onMarkerTap(e) {
				const markerId = e.detail.markerId;
				const marker = this.mapData.markers.find(m => m.id === markerId);
				if (marker) {
					uni.showModal({
						title: marker.title,
						content: `类型：${this.getMarkerTypeText(marker.type)}`,
						showCancel: false,
						confirmText: '知道了'
					});
				}
			},
			// 获取标记类型文本
			getMarkerTypeText(type) {
				const typeMap = {
					'government': '政府机构',
					'shopping': '购物中心',
					'education': '教育机构'
				};
				return typeMap[type] || '未知类型';
			},
			// 地图加载完成事件
			onMapLoad() {
				console.log('地图加载完成');
			},
			// H5端高德地图相关方法
			// #ifdef H5
			// 初始化高德地图
			initAmapMap() {
				// 检查是否已加载高德地图API
				if (window.AMap) {
					this.createAmapMap();
				} else {
					this.loadAmapScript();
				}
			},
			// 动态加载高德地图JavaScript API
			loadAmapScript() {
				const script = document.createElement('script');
				script.type = 'text/javascript';
				script.src = `https://webapi.amap.com/maps?v=1.4.15&key=cf14f6a5fb0c3a0287fb4199433c7bfde&callback=initAmapCallback`;
				script.onerror = () => {
					console.error('高德地图API加载失败');
					uni.showToast({
						title: '地图加载失败',
						icon: 'none'
					});
				};
				document.head.appendChild(script);
				
				// 设置全局回调函数
				window.initAmapCallback = () => {
					this.createAmapMap();
				};
			},
			// 创建高德地图实例
			createAmapMap() {
				try {
					// 创建地图实例
					this.amapInstance = new AMap.Map('amap-container', {
						zoom: this.mapData.scale,
						center: [this.mapData.longitude, this.mapData.latitude],
						viewMode: '3D',
						features: ['bg', 'road', 'building']
					});
					
					// 添加标记点
					this.addAmapMarkers();
					
					// 添加地图事件监听
					this.amapInstance.on('click', (e) => {
						console.log('地图点击:', e.lnglat);
					});
					
					console.log('高德地图初始化成功');
				} catch (error) {
					console.error('高德地图初始化失败:', error);
					uni.showToast({
						title: '地图初始化失败',
						icon: 'none'
					});
				}
			},
			// 添加高德地图标记点
			addAmapMarkers() {
				if (!this.amapInstance) return;
				
				// 清除现有标记
				this.amapInstance.clearMap();
				
				// 添加标记点
				this.mapData.markers.forEach(marker => {
					const amapMarker = new AMap.Marker({
						position: [marker.longitude, marker.latitude],
						title: marker.title,
						icon: new AMap.Icon({
							size: new AMap.Size(marker.width, marker.height),
							image: marker.iconPath,
							imageSize: new AMap.Size(marker.width, marker.height)
						})
					});
					
					// 添加点击事件
					amapMarker.on('click', () => {
						console.log('点击了标记:', marker.title);
						uni.showToast({
							title: marker.title,
							icon: 'none'
						});
					});
					
					this.amapInstance.add(amapMarker);
				});
			},
			// #endif
			
			// App端地图相关方法
			// #ifdef APP-PLUS
			// 初始化App端地图
			initAppMap() {
				console.log('App端地图初始化开始');
				// 检查地图数据
				if (!this.mapData || !this.mapData.latitude || !this.mapData.longitude) {
					console.error('地图数据不完整:', this.mapData);
					uni.showToast({
						title: '地图数据错误',
						icon: 'none'
					});
					return;
				}
				
				// 延迟初始化，确保DOM已渲染
				setTimeout(() => {
					console.log('App端地图数据:', this.mapData);
					// 这里可以添加App端特定的地图初始化逻辑
				}, 100);
			}
			// #endif
		},
		// 生命周期
		mounted() {
			// H5端：初始化高德地图
			// #ifdef H5
			this.initAmapMap();
			// #endif
			
			// App端：初始化地图
			// #ifdef APP-PLUS
			this.initAppMap();
			// #endif
		},
		// 页面显示时检查是否有城市选择结果
		onShow() {
			// 检查是否有从选择地址页面返回的城市信息
			const selectedCity = uni.getStorageSync('selectedCity');
			if (selectedCity) {
				this.userLocation.address = selectedCity.address;
				this.userLocation.latitude = selectedCity.latitude;
				this.userLocation.longitude = selectedCity.longitude;
				// 清除存储的城市信息
				uni.removeStorageSync('selectedCity');
			}
		}
	}
</script>

<style scoped>
	.container {
		background-color: #f5f5f5;
		min-height: 100vh;
		position: relative;
		/* #ifdef H5 */
		padding-bottom: 140rpx; /* 为自定义TabBar留出空间 */
		/* #endif */
		/* #ifdef APP-PLUS */
		padding-bottom: 140rpx; /* 为自定义TabBar留出空间 */
		/* #endif */
		/* #ifdef MP-WEIXIN */
		padding-bottom: 140rpx; /* 为自定义TabBar留出空间 */
		/* #endif */
	}

	/* 顶部状态栏和导航栏 */
	.header {
		background: linear-gradient(135deg, #3183FB 0%, #3183FB 100%);
		padding-top: var(--status-bar-height);
	}

	.status-bar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 8rpx 30rpx;
		color: white;
		font-size: 24rpx;
	}

	.signal {
		display: flex;
		align-items: center;
		gap: 4rpx;
	}

	.signal-dot {
		width: 8rpx;
		height: 8rpx;
		border-radius: 50%;
		border: 1px solid white;
	}

	.signal-dot.filled {
		background-color: white;
	}

	.battery {
		display: flex;
		align-items: center;
		gap: 8rpx;
	}

	.battery-icon {
		width: 32rpx;
		height: 16rpx;
		border: 1px solid white;
		border-radius: 2rpx;
		position: relative;
	}

	.battery-icon::after {
		content: '';
		position: absolute;
		right: -4rpx;
		top: 50%;
		transform: translateY(-50%);
		width: 0;
		height: 0;
		border-left: 4rpx solid white;
		border-top: 4rpx solid transparent;
		border-bottom: 4rpx solid transparent;
	}

	.nav-bar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 30rpx 30rpx;
	}

	.nav-icon {
		width: 48rpx;
		height: 48rpx;
	}

	.nav-title {
		color: white;
		font-size: 36rpx;
		font-weight: bold;
	}

	/* 位置/搜索栏 */
	.location-bar {
		padding: 30rpx;
		background-color: white;
		margin: 20rpx;
		border-radius: 20rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
	}

	.location-input {
		display: flex;
		align-items: center;
		background-color: #f8f9fa;
		padding: 20rpx;
		border-radius: 15rpx;
	}

	.location-icon {
		width: 32rpx;
		height: 32rpx;
		margin-right: 16rpx;
	}

	.location-text {
		flex: 1;
		font-size: 28rpx;
		color: #333;
	}

	.refresh-section {
		display: flex;
		align-items: center;
		gap: 8rpx;
	}

	.refresh-icon {
		width: 24rpx;
		height: 24rpx;
	}

	.refresh-text {
		font-size: 24rpx;
		color: #666;
	}

	/* 服务分类 */
	.service-section {
		padding: 0 30rpx;
		margin-bottom: 30rpx;
	}

	.service-grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 20rpx;
	}

	.service-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 16rpx;
	}

	.service-icon {
		width: 120rpx;
		height: 120rpx;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.service-icon.blue {
		background: linear-gradient(135deg, #4070f4 0%, #0058cb 100%);
	}

	.service-icon.orange {
		background: linear-gradient(135deg, #fbb81c 0%, #f5a029 100%);
	}

	.service-icon.green {
		background: linear-gradient(135deg, #abfe3e 0%, #08c732 100%);
	}

	.service-icon.light-blue {
		background: linear-gradient(135deg, #0fb5f1 0%, #2ea8f9 100%);
	}

	.service-img {
		width: 60rpx;
		height: 60rpx;
	}

	.service-label {
		font-size: 24rpx;
		color: #333;
		text-align: center;
	}

	/* 附近加油站 */
	.gas-station-section {
		background-color: white;
		margin: 0 20rpx 30rpx;
		border-radius: 20rpx;
		padding: 30rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
	}

	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		margin-bottom: 20rpx;
	}

	.section-title {
		display: flex;
		flex-direction: column;
		gap: 8rpx;
	}

	.title-text {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.subtitle-text {
		font-size: 24rpx;
		color: #666;
	}

	.more-link {
		font-size: 24rpx;
		color: #666;
	}

	.map-container {
		width: 100%;
		height: 400rpx;
		border-radius: 15rpx;
		overflow: hidden;
	}

	.map-component {
		width: 100%;
		height: 100%;
	}
	
	/* App端地图特殊样式 */
	/* #ifdef APP-PLUS */
	.map-component {
		background-color: #f0f0f0;
		min-height: 400rpx;
	}
	/* #endif */

	/* 优惠团购 */
	.group-buy-section {
		background-color: white;
		margin: 0 20rpx 30rpx;
		border-radius: 20rpx;
		padding: 30rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
	}

	.group-buy-scroll {
		width: 100%;
	}

	.group-buy-list {
		display: flex;
		gap: 20rpx;
		padding: 10rpx 0;
	}

	.group-buy-item {
		min-width: 300rpx;
		display: flex;
		flex-direction: column;
		gap: 12rpx;
		background-color: #fff;
		border-radius: 15rpx;
		padding: 16rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
	}

	.group-buy-img {
		width: 100%;
		height: 160rpx;
		border-radius: 10rpx;
	}

	.group-buy-text {
		font-size: 26rpx;
		color: #333;
		line-height: 1.4;
		font-weight: 500;
	}

	.group-buy-price {
		display: flex;
		align-items: center;
		gap: 12rpx;
	}

	.original-price {
		font-size: 22rpx;
		color: #999;
		text-decoration: line-through;
	}

	.group-price {
		font-size: 28rpx;
		color: #ff4444;
		font-weight: bold;
	}

	.group-buy-info {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.participants {
		font-size: 22rpx;
		color: #666;
	}


</style>
